<template>
	<view class="container" :style="{paddingTop:height}">
		<view class="container_main">
			<view class="u-font-16 u-font-weight">
				选择服务
			</view>
			<view class="u-m-t-18">
				<u-scroll-list :indicator="false">
					<view class="u-flex">
						<view class="container_main_item" :class="current == index ? 'container_main_item--active' :''"
							v-for="(item, index) in serveList" :key="index" @click="change(index)">
							<u-image class="container_main_item_image" src="/static/personal/recommend.png" width="90"
								height="90" v-if="item.recommend"></u-image>
							<view class="container_main_item_center">
								<view>
									{{item.name}}
								</view>
								<view class="container_main_item_center_money">
									￥{{item.expense}}
								</view>
							</view>
							<view class="container_main_item_btm"
								:class="current == index ? 'container_main_item_btm--active' : ''">
								<text v-if="item.dayMoney != undefined">{{item.dayMoney}}/天</text>
								<text v-if="item.once != undefined">低至{{item.once}}元/次</text>
								<text v-if="item.count != undefined">低至{{item.count}}元/点</text>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

			<!-- 醒目标签 -->
			<view class="u-m-t-40 container_main_tag" v-if="tags.length > 0">
				<view class="u-font-16 u-font-weight">
					选择醒目标签
				</view>
				<view class="u-flex u-flex-wrap u-m-t-20">
					<view class="container_main_tag_item"
						:class="index == tagCurrent ? 'container_main_tag_item--active': ''"
						v-for="(item,index) in tags" :key="item.id" @click="changeTag(index)">
						{{item.name}}
					</view>
					<view class="container_main_tag_item container_main_tag_custom u-flex" @click="changeTag(3)">
						<u-image src="/static/personal/custom.png" width="26" height="26"></u-image>
						<view class="u-m-l-6">
							{{customVal || '自定义'}}
						</view>
					</view>
				</view>
			</view>

			<view class="container_main_pay">
				<view class="container_main_pay_tp u-flex u-row-between"
					v-if="jobList && utype == 1 && type == 'emergency' || type == 'job_refresh'">
					<view>职位名称</view>
					<view class="u-flex" @click="showPickerClick">
						<view class="u-m-r-16">
							{{jobname}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="container_main_pay_tp u-flex u-row-between" v-if="type == 'job_refresh'">
					<view>开始刷新时间</view>
					<view class="u-flex" @click="showDatetimePicker = true">
						<view class="u-m-r-16">
							{{starttime == "" ? "请选择" : starttime }}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="container_main_pay_tp u-flex u-row-between" v-if="type == 'job_refresh'">
					<view>刷新间隔</view>
					<view class="u-flex" @click="showTimerangePicker=true">
						<view class="u-m-r-16">
							{{refresh_timerange}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view></view>
				<view class="container_main_pay_tp u-flex u-row-between"
					v-if="integral && integral.enable_points_deduct == 1">
					<view>积分抵扣</view>
					<view class="u-flex">
						<view class="u-m-r-16">
							可使用{{integral.enable_points_deduct_points}}积分抵扣{{integral.enable_points_deduct_expense}}元
						</view>
						<u-checkbox shape="circle" v-model="integralCheck"></u-checkbox>
					</view>
				</view>
				<view class="line" v-if="integral && expense != 0 && integral.enable_points_deduct == 1">

				</view>
				<view class="container_main_pay_btm" v-if="integral && expense != 0">
					<u-radio-group wrap v-model="value">
						<u-radio v-for="(item, index) in payList" :key="index" :name="item.value">
							<view class="u-flex u-row-between u-col-center">
								<u-image :src="item.image" width="50rpx" :height="item.height"></u-image>
								<view class="u-m-l-20">
									{{item.name}}
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="container_btm" v-if="integral">
			<view>
				应付金额：<text>￥{{expense}}</text>
			</view>
			<view class="container_btm_pay" @click="$u.throttle(paySubmit, 2000)">立即支付</view>
		</view>

		<u-modal v-model="isCustom" title="添加自定义标签" confirmText="确定" showCancelButton @confirm="confirm">
			<template v-slot:default>
				<view class="u-p-30">
					<u-input border placeholder="请输入标签内容（最多五个字）" v-model="customVal" maxlength="5"></u-input>

				</view>
			</template>
		</u-modal>
		<!-- 职位选择 -->
		<u-select v-model="showPicker" :list="jobList" value-name="id" label-name="jobname"
			@confirm="jobConfirm"></u-select>
		<!-- 刷新间隔选择 -->
		<u-select v-model="showTimerangePicker" :list="options_timerange" @confirm="timerangeConfirm"></u-select>
		<!-- 开始刷新时间选择 -->
		<u-picker v-model="showDatetimePicker" mode="time" :params="params" :minDate="minDate" :startYear="startYear"
			@confirm="starttimeConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				utype: uni.getStorageSync('utype'),
				// 服务列表
				serveList: [],
				// 服务列表选中项
				current: 0,
				// 支付信息
				integral: {},
				// 积分复选框
				integralCheck: false,
				// #ifdef MP-WEIXIN 
				payList: [{
					name: '微信支付',
					image: '/static/personal/wxPay.png',
					height: '42rpx',
					value: 1
				}],
				// #endif
				// #ifndef MP-WEIXIN 
				payList: [{
						name: '微信支付',
						image: '/static/personal/wxPay.png',
						height: '42rpx',
						value: 1
					},
					{
						name: '支付宝支付',
						image: '/static/personal/zfbPay.png',
						height: '50rpx',
						value: 2
					}
				],
				// #endif
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 1,
				// 标签选中项
				tagCurrent: 0,
				// 自定义标签弹窗
				isCustom: false,
				customVal: '',
				// 职位名称
				jobname: '暂无职位',
				// 职位名称ID
				jobid: '',
				// 刷新间隔列表
				options_timerange: [],
				// 刷新间隔弹窗
				showTimerangePicker: false,
				// 刷新间隔ID
				timerange: '',
				// 刷新间隔名称
				refresh_timerange: '请选择',
				// 开始刷新时间弹窗
				showDatetimePicker: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true
				},
				minDate: {},
				startYear: '',
				// 开始刷新时间
				starttime: '',
				// 职位弹窗
				showPicker: false,
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		props: {
			height: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => []
			},
			tags: {
				type: Array,
				default: () => []
			},
			jobList: {
				type: Array,
				default: () => []
			},
			type: {
				type: String,
				default: ''
			}
		},
		computed: {
			expense() {
				if (this.integralCheck) {
					let expense = this.integral.expense.split('.')[0]
					return expense - this.integral.enable_points_deduct_points
				} else {
					return this.integral.expense.split('.')[0]
				}
			}
		},
		watch: {
			showDatetimePicker: {
				handler(nv) {
					if (nv) {
						let objDate = new Date()
						this.startYear = objDate.getFullYear()
						this.minDate = {
							startMonth: objDate.getMonth(),
							startDay: objDate.getDate(),
							startHour: objDate.getHours(),
							startMinute: objDate.getMinutes(),
							startSecond: 0,
						}
					}
				},
				deep: true,
				immediate: true
			},
			jobList: {
				handler(nv) {
					if (nv.length > 0) {
						this.jobname = nv[0].jobname
						this.jobid = nv[0].id
					}
				},
				deep: true,
				immediate: true
			},
			list: {
				handler(nv) {
					if (nv) {
						this.serveList = nv.map(item => {
							// 获得总金额
							let expense = item.expense.split('.')[0]
							// 每天金额,次数,点数
							let dayMoney, once, count
							if (item.days) {
								dayMoney = (parseInt(expense) / parseInt(item.days)).toFixed(2)
							}
							if (item.times) {
								once = (parseInt(expense) / parseInt(item.times)).toFixed(2)
							}
							if (item.download_resume_point) {
								count = (parseInt(expense) / parseInt(item.download_resume_point)).toFixed(2)
							}
							return {
								...item,
								dayMoney,
								once,
								count
							}
						})
						this.integral = this.serveList[this.current]
					}
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			this.options_timerange = []
			for (let i = 1; i <= 12; i++) {
				this.options_timerange.push({
					label: i + '小时',
					value: i * 3600
				})
			}
			this.options_timerange.push({
				label: '24小时',
				value: 24 * 3600
			})
			this.options_timerange.push({
				label: '48小时',
				value: 48 * 3600
			})
		},
		methods: {
			showPickerClick() {
				if (this.jobList.length == 0) return
				this.showPicker = true
			},
			// 开始刷新时间
			starttimeConfirm(e) {
				this.starttime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},
			// 刷新间隔选择
			timerangeConfirm(e) {
				this.timerange = e[0].value
				this.refresh_timerange = e[0].label
			},
			// 职位选择
			jobConfirm(e) {
				this.jobid = e[0].value
				this.jobname = e[0].label
			},
			// 拉起支付
			async paySubmit() {
				uni.showLoading({

				})
				let params, orderInfo, payment = {}
				// 支付方式  free-积分支付 wxpay-微信 alipay-支付宝
				if (this.expense == 0) {
					payment = 'free'
				} else {
					payment = this.value == 1 ? 'wxpay' : 'alipay'
				}
				if (this.utype == 1) {
					if (this.type == 'emergency' || this.type == 'job_refresh') {
						if (this.jobid == '') {
							uni.hideLoading()
							uni.$u.toast('暂无可购买的职位信息')
							return
						}
					}
					if (this.type == 'job_refresh' && this.starttime == '') {
						uni.hideLoading()
						uni.$u.toast('请选择开始刷新时间')
						return
					}
					if (this.type == 'job_refresh' && this.timerange == '') {
						uni.hideLoading()
						uni.$u.toast('请选择刷新时间间隔')
						return
					}
					params = {
						payment,
						service_type: this.type == 'job_refresh' ? 'refresh_job_package' : this.type,
						service_id: this.integral.id, // 选择服务的ID
						deduct_points: this.integralCheck ? this.integral.enable_points_deduct_points :
						0, // 是否使用积分抵扣
						jobid: this.jobid, // 企业端选择的职位名称
						starttime: this.starttime, // 企业端 职位刷新 开始刷新时间
						timerange: this.timerange // 企业端 职位刷新 刷新间隔
					}
					orderInfo = await uni.$u.api.company_pay(params)
				} else {
					params = {
						payment,
						service_type: this.tags.length == 0 ? 'stick' : 'tag',
						service_id: this.integral.id, // 选择服务的ID
						deduct_points: this.integralCheck ? this.integral.enable_points_deduct_points :
						0, // 是否使用积分抵扣
						tag_text: this.tags.length > 0 && this.tagCurrent != 3 ? this.tags[this.tagCurrent].name :
							this
							.customVal, // 求职者选择的标签分类
					}
					orderInfo = await uni.$u.api.pay(params)
				}
				if (orderInfo.pay_status == 1) {
					uni.hideLoading()
					uni.$u.toast('支付成功')
					setTimeout(() => {
						uni.$u.route({
							type: 'redirect',
							url: 'pages/pagesPersonal/integral/serve/serve'
						})
					}, 500)
				} else {
					// #ifndef H5
					// 拉起收银台
					uni.requestPayment({
						provider: params.payment,
						orderInfo: orderInfo.parameter, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						success(res) {
							uni.hideLoading()
							uni.$u.toast('支付成功')
							setTimeout(() => {
								uni.$u.route('pages/pagesPersonal/integral/serve/serve')
							}, 500)
						},
						fail(err) {
							uni.hideLoading()
							uni.$u.toast('您已取消支付')
						}
					});
					// #endif
					// #ifdef H5
					uni.hideLoading()
					uni.$u.toast('暂不支持')
					// #endif

				}
			},
			/* 选择服务 */
			change(index) {
				this.current = index
				this.integral = this.serveList[this.current]
			},
			/* 选择标签 */
			changeTag(index) {
				if (index == 3) {
					this.isCustom = true
				} else {
					this.tagCurrent = index
				}
			},
			// 自定义标签确定事件
			confirm() {
				if (uni.$u.test.isEmpty(this.customVal)) {
					uni.$u.toast('请输入自定义标签')
					this.isCustom = true
					return
				}
				this.tagCurrent = 3
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
		color: #101010;

		&_main {
			padding-top: 30rpx;
			padding-bottom: 200rpx;

			&_item {
				border: 2rpx solid #D77E1C;
				width: 240rpx;
				height: 300rpx;
				margin-right: 40rpx;
				text-align: center;
				position: relative;
				color: #101010;
				font-size: 32rpx;

				&--active {
					background-color: #FFF4F4;
				}


				&_image {
					position: absolute;
					left: 0;
					top: 0;
				}

				&_center {
					padding-top: 90rpx;
					font-size: 28rpx;

					&_money {
						color: #CB3030;
						font-size: 28rpx;
						margin-top: 16rpx;
					}
				}

				&_btm {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					font-size: 26rpx;
					color: #bbb;

					&--active {
						color: #fff;
						background-color: #F9514F;
						// background-image: url(/static/personal/rightBtm.png);
					}

					&--active::after {
						content: "";
						position: absolute;
						bottom: 0;
						right: 0;
						width: 0;
						height: 0;
						border-bottom: 52rpx solid #fff;
						border-left: 52rpx solid transparent;
					}

					&--active::before {
						content: "";
						position: absolute;
						right: 10rpx;
						bottom: 8rpx;
						z-index: 3;
						width: 10rpx;
						height: 18rpx;
						border-color: #F9514F;
						border-style: solid;
						border-width: 0 4rpx 4rpx 0;
						transform: rotate(45deg);
					}
				}
			}


			&_tag {
				box-shadow: 0px 2rpx 18rpx 2rpx rgba(0, 0, 0, 0.17);
				padding: 18rpx 24rpx;

				&_item {
					padding: 10rpx 20rpx;
					border-radius: 44rpx;
					background-color: rgba(255, 255, 255, 1);
					border: 2rpx solid rgba(187, 187, 187, 1);
					color: #797676;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 26rpx;
					margin-bottom: 10rpx;

					&--active {
						border: 2rpx solid #00d075;
						color: #00d075
					}
				}

				&_custom {
					margin-right: 0;
					border: 2rpx dashed #00d075;
					color: #00d075;
				}
			}

			&_pay {
				box-shadow: 0px 2rpx 18rpx 2rpx rgba(0, 0, 0, 0.17);
				padding: 10rpx 30rpx;
				font-size: 26rpx;
				margin-top: 60rpx;

				:deep(.u-checkbox) {
					display: block
				}

				:deep(.u-radio-group) {
					width: 100%;

					.u-radio {
						flex-direction: row-reverse;
						justify-content: space-between;
						margin-bottom: 28rpx;

						.u-radio__label {
							font-size: 28rpx !important
						}
					}
				}

				&_tp {
					padding: 30rpx 0;
				}

				.line {
					border-top: 2rpx solid #bbb;
				}

				&_btm {
					padding-top: 30rpx;
				}
			}
		}

		&_btm {
			position: fixed;
			bottom: 0;
			/* #ifdef MP-WEIXIN */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			left: 0;
			right: 0;
			margin: auto;
			padding: 0 38rpx;
			background-color: #fff;
			height: 134rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 9999;
			border-top: 2rpx solid #bbb;
			font-size: 32rpx;

			text {
				color: #CB3030;
			}

			&_pay {
				background-color: #F9514F;
				color: #fff;
				font-size: 28rpx;
				width: 184rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>